<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card v-loading="loading">
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
        >
          <!-- 标签第一页 -->
          <el-tab-pane
            abel="角色管理"
            name="manager"
          >
            <el-row style="height: 60px">
              <el-button
                type="primary"
                size="small"
                icon="el-icon-plus"
                @click="editShow=true"
              >新增角色
              </el-button>
            </el-row>
            <!-- 表格 -->
            <el-table
              ref="table"
              :border="true"
              :data="allUser"
            >
              <el-table-column
                label="序号"
                width="120"
                type="index"
              />
              <el-table-column
                label="角色名"
                width="240"
                prop="name"
              />
              <el-table-column
                label="描述"
                prop="description"
              />
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button
                    size="small"
                    type="success"
                    @click="allotPermission(scope.row)"
                  >分配权限</el-button>
                  <el-button
                    size="small"
                    type="primary"
                    @click="editRole(scope.row)"
                  >编辑</el-button>
                  <el-button
                    size="small"
                    type="danger"
                    @click="delRole(scope.row)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 表格 -->
            <el-row
              type="flex"
              lign="middle"
              style="height: 60px"
              justify="center"
            >
              <el-pagination
                layout="prev, pager, next"
                :total="total"
                :page-size="pagesize"
                :current-page="page"
                @current-change="changePage"
              />
            </el-row>
          </el-tab-pane>
          <!-- 标签第一页 -->
          <!-- 标签第二页 -->
          <el-tab-pane
            label="公司信息"
            name="company"
          >
            <el-alert
              title="对公司名称、公司地址、营业执照、公司地区的更新，将使得公司资料被重新审核，请谨慎修改"
              type="info"
              show-icon
              :closable="false"
            />
            <el-form
              label-width="120px"
              style="margin-top: 50px"
            >
              <el-form-item label="公司名称">
                <el-input
                  v-model="company.name"
                  disabled
                  style="width: 400px"
                />
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input
                  v-model="company.companyAddress"
                  disabled
                  style="width: 400px"
                />
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input
                  v-model="company.mailbox"
                  disabled
                  style="width: 400px"
                />
              </el-form-item>
              <el-form-item label="备注">
                <el-input
                  v-model="company.remarks"
                  type="textarea"
                  :rows="3"
                  disabled
                  style="width: 400px"
                />
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <!-- 标签第二页 -->
        </el-tabs>
      </el-card>

      <!-- 编辑弹出层 -->
      <el-dialog
        title="编辑角色"
        :visible="editShow"
        width="60%"
        @close="closeFn"
      >
        <el-form
          ref="form"
          :model="singerUser"
          label-width="80px"
          :rules="rules"
        >
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="singerUser.name" />
          </el-form-item>
          <el-form-item label="角色描述" prop="description">
            <el-input v-model="singerUser.description" />
          </el-form-item>
          <el-row
            type="flex"
            justify="center"
            align="middle"
            style="height: 80px"
          >
            <el-button
              type="default"
              size="small"
              @click="closeFn"
            >取消</el-button>
            <el-button
              type="primary"
              size="small"
              @click="okBtn"
            >确定</el-button>
          </el-row>
        </el-form>
      </el-dialog>
      <!-- 分配权限弹出层 -->
      <el-dialog
        :title="`为${promissionTitle}分配权限`"
        :visible.sync="promissionShow"
        width="width"
        @close="closePer"
      >
        <el-tree
          ref="permTree"
          show-checkbox
          :check-strictly="true"
          :data="Perdata"
          :props="defaultProps"
          :default-expand-all="true"
          :default-checked-keys="perList"
          node-key="id"
        />
        <el-row slot="footer" type="flex" justify="center">
          <el-button @click="closePer">取 消</el-button>
          <el-button type="primary" @click="PerOkBtn">确 定</el-button>
        </el-row>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getAllUser, getCompany, delRole, getRoleById, updataRole, addRole, allotPerApi } from '@/api/setting'
import { mapGetters } from 'vuex'
import { getAllpermission } from '@/api/permission'
import { transformTreeData } from '@/utils/index'
export default {
  name: 'Setting',
  data() {
    return {
      // 权限弹出层标题
      promissionTitle: '',
      promissionShow: false,
      // 权限树形数据
      Perdata: [],
      defaultProps: {
        label: 'name'
      },
      // 权限点数组
      perList: [],
      id: '',
      activeName: 'manager',
      page: 1,
      pagesize: 5,
      total: null,
      allUser: [],
      company: {
        companyAddress: '',
        mailbox: '',
        name: '',
        remarks: ''
      },
      editShow: false,
      singerUser: {
        name: '',
        region: ''
      },
      rules: {
        name: [{ required: true, trigger: 'blur', message: '名字必填' }],
        description: [{ required: true, trigger: 'blur', message: '描述必填' }]
      },
      loading: false
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  created() {
    this.getUser()
    this.getCompany()
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    async getUser() {
      this.loading = true
      const result = await getAllUser({
        page: this.page,
        pagesize: this.pagesize
      })
      this.allUser = result.rows
      this.total = result.total
      this.loading = false
    },
    async getCompany() {
      const { companyAddress, mailbox, name, remarks } = await getCompany(
        this.userInfo.companyId
      )
      this.company.companyAddress = companyAddress
      this.company.mailbox = mailbox
      this.company.name = name
      this.company.remarks = remarks
    },
    // 页码变化
    changePage(page) {
      console.log(111)
      this.page = page
      this.getUser()
    },
    closeFn() {
      this.editShow = false
      this.$refs.form.resetFields()
      this.singerUser = {
        name: '',
        region: ''
      }
    },
    // 删除角色的功能
    async delRole(data) {
      try {
        await this.$confirm('确认关闭吗')

        await delRole(data.id)
        // const index = this.allUser.findIndex((itm) => itm.id === data.id);
        // this.allUser.splice(index, 1);
        const nowNum = this.$refs.table.tableData
        console.log(nowNum.length)
        if (nowNum.length === 1) {
          this.page--
        }
        this.getUser()
        this.$message.success('删除成功')
      } catch (err) {
        console.log(err)
      }
    },
    // 编辑角色功能
    async editRole(obj) {
      this.singerUser = await getRoleById(obj.id)
      this.editShow = true
    },
    okBtn() {
      this.$refs.form.validate(async ok => {
        if (ok) {
          if (this.singerUser.id) {
            await updataRole(this.singerUser)
          } else {
            // 新增状态
            await addRole(this.singerUser)
          }
          this.$message.success(this.singerUser.id ? '更新成功' : '新增成功')
          this.editShow = false
          this.getUser()
        }
      })
    },
    // 分配权限弹层层
    async allotPermission(data) {
      this.promissionTitle = data.name
      this.id = data.id
      this.Perdata = transformTreeData(await getAllpermission(), '0')
      const { permIds } = await getRoleById(data.id)
      this.perList = permIds
      this.promissionShow = true
    },
    // 点击确定分配权限
    async PerOkBtn() {
      const permIds = this.$refs.permTree.getCheckedKeys()
      await allotPerApi({
        id: this.id,
        permIds: permIds
      })
      this.$message.success('分配权限成功')
      this.promissionShow = false
    },
    closePer() {
      this.perList = []
      this.promissionShow = false
    }
  }
}
</script>

<style scoped >
.dashboard-container {
  background-color: #f0f2f5;
}
</style>
